import React from 'react'
import { Menu } from 'antd';
import './index.css'
import {adminRoutes} from '../../router'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
const { SubMenu } = Menu;


function SideBar(props) {
  let handleMenu = ({key})=>{
    console.log(key);
    props.history.push(key)
  }
  let {role} = props.userReducer.userInfo  //提取状态机中的用户角色值
  // console.log(props)
  return (
    <Menu 
      theme="dark" 
      mode="inline" 
      defaultSelectedKeys={['/admin']}
      onClick={handleMenu}
    >
      {
        adminRoutes.map((item,index)=>{
          // item.roles.includes
          let bool = item.roles.includes(role) //判断当前用户是否有权限访问某个组件路由
          if(bool&&item.title){
            return item.children
              ?
              <SubMenu title={item.title} key={item.title}>
                {
                  // children子路由数据包渲染
                  item.children.map((itm, idx) => {
                    let bool = itm.roles.includes(role) //当前用户是否有权限访问子菜单
                    return bool&&itm.title 
                           ? 
                           <Menu.Item key={itm.path} icon={itm.icon}>
                             {itm.title}
                           </Menu.Item>
                           :
                           ''
                  })
                }
              </SubMenu >
              :
              <Menu.Item key={item.path} icon={item.icon}>
                {item.title}
              </Menu.Item>
          }else{
            return ''   //不渲染主菜单
          }
        })
      }
    </Menu>
  )
}

const mapStateToProps = (state)=>{
  return state
}

export default connect(mapStateToProps)(withRouter(SideBar))
